<template>
  <transition name="fade_leave_opacity" @click.stop="ignore">
    <div class="mask" v-if="isShowViewer" @click.stop="ignore">
      <!-- 背景，因做渐入效果，单独使用元素 -->
      <div class="config_bk" @click.stop="closeViewer"></div>

      <div class="preview-box" @wheel.prevent="handleWheel($event)">
        <!-- 标题区开始 -->
        <div class="title">
          <div class="close-btn flex-center">
            <i class="el-icon-circle-close" @click.stop="closeViewer"></i>
          </div>
          <div class="text">查看大图({{currentIndex + 1}}/{{urlList.length}})
          </div>
        </div>
        <!-- 标题区结束 -->
        <!-- 图片区开始 -->
        <div class="img-box" @mousedown="startDrag" @mousemove="doDrag" @mouseup="stopDrag" @mouseleave="stopDrag">
          <!-- 左箭头 -->
          <div class="left-arrow" v-if="urlList.length > 1">
            <el-button class="icon" size="mini" @click.stop="leftClick" :disabled="currentIndex === 0">
              <i class="iconfont iconjinruzuo"></i>
            </el-button>
          </div>
          <!-- 切换图片 -->
          <div class="trans-img" :class="{'no-arrow' : urlList.length <= 1}">
            <el-image
              v-for="(item, i) in urlList"
              :key="i" v-show="i === currentIndex"
              class="trans-img_item"
              :src="item.url"
              :style="{ transform: 'translate(' + dragOffsetX + 'px, ' + dragOffsetY + 'px) scale(' + scale + ')' }"
              fit="contain">
            </el-image>
          </div>
          <!-- 右箭头 -->
          <div class="right-arrow" v-if="urlList.length > 1">
            <el-button class="icon" size="mini" @click.stop="rightClick" :disabled="currentIndex === urlList.length -1">
              <i class="iconfont iconjinruyou"></i>
            </el-button>
          </div>
        </div>
        <!-- 图片区结束 -->
        <div style="text-align: center;color: white;font-size: 30px">{{currentName}}</div>
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    props: {
      zIndex: {
        type: Number,
        default: 2000
      },
    },
    data() {
      return {
        isShowViewer: false,
        currentIndex: 0,
        scale: 1,
        prevOverflow: null,
        isDragging: false,
        startDragX: 0,
        startDragY: 0,
        dragOffsetX: 0,
        dragOffsetY: 0,
        urlList: [],
      }
    },
    computed: {
      currentImg() {
        return this.urlList[this.currentIndex].url
      },
      currentName() {
        return this.urlList[this.currentIndex].name
      },
    },
    methods: {
      ignore() {},
      handleWheel(event) {
        const delta = event.deltaY ? event.deltaY : event.wheelDelta ? event.wheelDelta : event.detail;
        this.scale += (delta < 0) ? 0.1 : -0.1;
        this.scale = Math.min(Math.max(.1, this.scale), 5);
      },
      leftClick() {
        if (this.currentIndex !== 0) {
          this.currentIndex--
        }
      },
      rightClick() {
        if (this.currentIndex !== this.urlList.length - 1) {
          this.currentIndex++
        }
      },
      closeViewer() {
        document.body.style.overflow = this.prevOverflow
        this.isShowViewer = false
        this.currentIndex = 0
        this.scale = 1
      },
      showViewer(list, index) {
        this.urlList = list || []
        this.currentIndex = index || 0
        this.isShowViewer = true
        this.prevOverflow = document.body.style.overflow
        document.body.style.overflow = 'hidden'
      },
      startDrag(event) {
        this.isDragging = true;
        this.startDragX = event.clientX;
        this.startDragY = event.clientY;
        this.dragOffsetX = 0;
        this.dragOffsetY = 0;
      },
      doDrag(event) {
        if (this.isDragging) {
          const deltaX = event.clientX - this.startDragX;
          const deltaY = event.clientY - this.startDragY;
          this.dragOffsetX = deltaX;
          this.dragOffsetY = deltaY;
        }
      },
      stopDrag() {
        if (this.isDragging) {
          this.isDragging = false;
        }
      }
    },
    watch: {
      isShowViewer(value) {
        if (value) {
          this.prevOverflow = document.body.style.overflow
          document.body.style.overflow = 'hidden'
        } else {
          document.body.style.overflow = this.prevOverflow
        }
      }
    }
  }
</script>

<style lang='less' scoped>
  .mask {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;

    .config_bk {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 9999;
      background-color: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(10px);
      animation: fade_enter_opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      @keyframes fade_enter_opacity {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
    }

    .preview-box {
      border-radius: 8px;
      animation: fade_enter_top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      @keyframes fade_enter_top {
        from {
          transform: translateY(-15px);
        }
        to {
          transform: translateY(0);
        }
      }

      .title {
        padding-left: 24px;
        height: 54px;
        line-height: 54px;
        position: relative;
        border-radius: 8px 8px 0px 0px;
        z-index: 9999 !important;

        .close-btn {
          cursor: pointer;
          position: absolute;
          right: 0;
          color: #fff;
          width: 44px;
          height: 44px;
          font-size: 36px;
        }

        .text {
          color: #fff;
          text-align: center;
        }
      }

      .img-box {
        padding: 24px;
        border-radius: 0px 0px 8px 8px;
        display: flex;
        z-index: 9999;

        .trans-img {
          z-index: 9999;
          margin: 0 24px;
          width: 85vw;
          height: 80vh;
          position: relative;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;

          .trans-img_item {
            z-index: 9999;
            height: 100%;
            width: 100%;
          }
        }

        .left-arrow, .right-arrow {
          cursor: pointer;
          width: 52px;
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 9999;

          .icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 52px;
            height: 52px;
            z-index: 9999;
            i {
              font-size: 30px;
              z-index: 9999;
            }
          }
        }
      }

      .no-arrow {
        margin: 0 !important;
      }
    }
  }

  .fade_leave_opacity-leave-active {
    transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  .fade_leave_opacity-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
</style>
